<template>
    <div>
        <!-- 右侧悬浮折叠信息窗 -->
        <div class="collapse-box">
            <button class="toggle-button" @click="toggleCollapse">
                <span :class="isCollapse?'el-icon-notebook-2':'el-icon-caret-right'" style="margin-bottom: 5px" />
                <span>{{isCollapse?'数据记录':'收起窗口'}}</span>
            </button>
            <div :class="isCollapse?'collapse-box-hide':'collapse-box-hide collapse-box-active'">
                <div v-if="isShowFont">
                    <ul class="note-ul" v-if="areaRecords && accountData.data">
                        <li class="note-li" v-for="(item,index) in areaRecords">
                            <span class="note-highlight-blue"> {{getAccountNameByID(item.userId)}} </span>于
                            <span class="note-highlight-blue"> {{item.date}} </span>
                            <span :class="getBehaviorClass(item.behavior)"> {{getBehavior(item.behavior)}} </span>了监测区域：
                            <span class="note-highlight-blue"> {{getAreaNameByID(item.targetId)}} </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--新增/修改区域用Dialog-->
        <el-dialog :title="editState?'区域编辑':'新增区域'" width="65%" :top="editState?'11vh':'15vh'" :visible.sync="dialogFormVisible" @close="closeDialog">
            <!--添加状态-->
            <el-form :model="areaForm" v-if="!editState" label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="区域名称：" label-width="100px">
                            <el-input v-model="areaForm.areaName" autocomplete="off" placeholder="请输入区域名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="5">
                        <el-form-item label="所在县区：" label-width="100px">
                            <el-cascader v-model="areaForm.areaCode"
                                         :options="this.citys"
                                         :props="optionProps"
                                         style="width: 100%"
                                         filterable
                                         @change="setSelectedCity"
                                         ref="areaCascader"></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <el-form-item label="区域坐标：" label-width="100px">
                            <MapSelect :editState="editState" :city="selectedCity" @getPosition="getPosition"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="发送频率：" label-width="100px">
                            <el-select v-model="areaForm.frequency" placeholder="选择发送频率...">
                                <el-option v-for="item in frequencyOptions" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!--编辑状态-->
            <el-form :model="areaForm" v-if="editState" label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="区域名称：" label-width="100px">
                            <el-input v-model="areaForm.areaName" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="5">
                        <el-form-item label="所在县区：" label-width="100px">
                            <el-cascader v-model="areaForm.areaCode"
                                         :options="this.citys"
                                         :props="optionProps"
                                         style="width: 100%"
                                         filterable
                                         @change="setSelectedCity"
                                         ref="areaCascader"></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <el-form-item label="区域坐标：" label-width="100px">
                            <MapSelect :editState="editState" :city="selectedCity" :area="MapSelectItem" @getPosition="getPosition" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="发送频率：" label-width="100px">
                            <el-select v-model="areaForm.frequency" placeholder="请选择发送频率...">
                                <el-option v-for="item in frequencyOptions" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="5">
                        <el-form-item label="创建者ID：" label-width="100px">
                            <span>{{areaForm.creator}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="部署设备：" label-width="100px">
                            <span>{{areaForm.count}} 台</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="5">
                        <el-form-item label="启用状态：" label-width="100px">
                            <el-tooltip :content="areaForm.enable?'点击禁用':'点击激活'" placement="bottom">
                                <el-switch v-model="areaForm.enable" active-color="#13ce66" inactive-color="#ff4949" :style="{height:40 + 'px'}"></el-switch>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!--操作按钮行-->
            <el-row>
                <el-col :span="2" :offset="17">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-col>
                <el-col :span="2" :offset="2" v-if="editState">
                    <el-button type="primary" @click="myEditArea">确 定</el-button>
                </el-col>
                <el-col :span="2" :offset="2" v-if="!editState">
                    <el-button type="primary" @click="areaAdd">确 定</el-button>
                </el-col>
            </el-row>
        </el-dialog>
        <!--添加功能启用按钮-->
        <el-row :gutter="20" type="flex" justify="start" v-if="loginInfo.levelId === 1">
            <el-col :span="3">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="openDialogForAdd">添加</el-button>
            </el-col>
        </el-row>
        <!--table-->
        <el-table :data="this.areaData" stripe style="width: 100%"
                  :height="tableHeight"
                  :border="true"
                  :row-class-name="tableRowClassName"
                  header-cell-class-name="header-cell">
            <el-table-column prop="areaId" label="ID" width="70" sortable />
            <el-table-column prop="areaName" label="区域名" width="220" sortable />
            <el-table-column prop="areaRemarks" show-overflow-tooltip label="描述" width="200" sortable />
            <el-table-column prop="count" label="已部署设备" width="120" sortable align="center" header-align="left" >
                <template slot-scope="scope">{{scope.row.count}} 台</template>
            </el-table-column>
            <el-table-column prop="frequency" label="发送频率" width="110" sortable>
                <template slot-scope="scope">{{scope.row.frequency}}min / 次</template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建日期" width="160" sortable/>
            <el-table-column prop="updateDate" label="更新日期" width="160" sortable/>
            <el-table-column prop="enable" label="状态" width="80" sortable align="center" header-align="left">
                <template slot-scope="scope">
                    <span v-if="scope.row.enable" style="color: #68c176; font-weight: bold">激活</span>
                    <span v-if="!scope.row.enable" style="color: #e05e5e; font-weight: bold">禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" v-if="loginInfo.levelId === 1" align="center" header-align="left">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                               @click="openDialogForEdit(scope.$index,scope.row)"
                               class="table-cell-button">编辑</el-button>
                    <el-popconfirm title="确定要删除该区域吗?" confirm-button-text="确定" cancel-button-text="取消"
                                   @confirm="myAreaDelete(scope.$index,scope.row)"
                                   icon-color="red"
                                   icon="el-icon-info">
                        <el-button size="mini" type="danger" icon="el-icon-delete" slot="reference" class="table-cell-button">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import MapSelect from "../components/AreaDataComponents/MapSelect";

export default {
    name: "Area",
    data() {
        return {
            dialogFormVisible: false,
            isCollapse: true,
            isShowFont: false,
            editState: false,
            selectIndex: null,
            selectedCity: [],
            tableHeight: null,
            //省市区三级联动
            optionProps: { //配置节点
                value: 'value',
                label: 'label',
                children: 'children'
            },
            //发送频率
            frequencyOptions: [
                {
                    label: '5min / 次',
                    value: 5
                },
                {
                    label: '10min / 次',
                    value: 10
                },
                {
                    label: '15min / 次',
                    value: 15
                },
                {
                    label: '20min / 次',
                    value: 20
                },
                {
                    label: '25min / 次',
                    value: 25
                },
                {
                    label: '30min / 次',
                    value: 30
                }
            ],
            areaForm: {
                areaId: '',
                areaName: '',
                areaCode: '',
                areaRemarks: '',
                areaLng: null,
                areaLat: null,
                count: 0,
                frequency: 10,
                creator: '',
                createDate: '',
                updateDate: '',
                enable: true
            }
        }
    },
    components: {
        MapSelect
    },
    methods: {
        ...mapActions([
            'updateAreasParam',
            'initAreas',
            'initAccounts',
            'addArea',
            'editArea',
            'deleteArea'
        ]),
        areaAdd() {
            if (this.areaForm.areaName && this.areaForm.areaCode) {
                if (this.areaForm.areaLng && this.areaForm.areaLat) {
                    this.areaForm.areaRemarks = this.$refs.areaCascader.inputValue;
                    this.areaForm.areaCode = this.areaForm.areaCode.join('/');
                    //调用存放在actions中的添加账户方法
                    this.addArea(this.areaForm);
                    //关闭Dialog
                    this.closeDialog();
                } else {
                    this.$message.warning("必须选择部署地点!");
                }
            } else {
                this.$message.warning("名称和区域不能为空!");
            }
        },
        getTableHeight() {
            this.tableHeight = window.innerHeight - 60 - (40 + 14 + 30) - (33 + 20) + 15;
        },
        tableRowClassName({row,rowIndex}) {
            if ((rowIndex + 1) % 3 === 0) {
                if ((rowIndex + 1) / 3 % 2 === 0) {
                    return 'row-background-default row-background-blue';
                } else {
                    return 'row-background-default row-background-grey';
                }
            } else {
                return 'row-background-default';
            }
        },
        openDialogForAdd() {
            this.dialogFormVisible = true;
            this.editState = false;
        },
        openDialogForEdit(index, data) {
            //状态变更
            this.dialogFormVisible = true;
            this.editState = true;
            this.selectIndex = index;
            //深拷贝数据进areaForm
            this.areaForm.areaId = data.areaId;
            this.areaForm.areaName = data.areaName;
            this.areaForm.areaCode = data.areaCode.split("/");
            this.areaForm.areaLng = data.areaLng;
            this.areaForm.areaLat = data.areaLat;
            this.areaForm.areaRemarks = data.areaRemarks;
            this.areaForm.count = data.count;
            this.areaForm.frequency = data.frequency;
            this.areaForm.creator = data.creator;
            this.areaForm.createDate = data.createDate;
            this.areaForm.updateDate = data.updateDate;
            this.areaForm.enable = data.enable;
        },
        closeDialog() {
            this.dialogFormVisible = false;
            this.areaForm.areaId = '';
            this.areaForm.areaName = '';
            this.areaForm.areaRemarks = '';
            this.areaForm.areaCode = '';
            this.areaForm.areaLng = null;
            this.areaForm.areaLat = null;
            this.areaForm.count = 0;
            this.areaForm.frequency = 10;
            this.areaForm.creator = '';
            this.areaForm.createDate = '';
            this.areaForm.updateDate = '';
            this.areaForm.enable = true;
        },
        myEditArea() {
            //深拷贝
            let data = {
                areaId: this.areaForm.areaId,
                areaName: this.areaForm.areaName,
                areaCode: this.areaForm.areaCode.join('/'),
                areaLng: this.areaForm.areaLng,
                areaLat: this.areaForm.areaLat,
                areaRemarks: this.$refs.areaCascader.inputValue,
                count: this.areaForm.count,
                frequency: this.areaForm.frequency,
                creator: this.areaForm.creator,
                createDate: this.areaForm.createDate,
                enable: this.areaForm.enable
            };
            let params = {
                data: data
            };
            //提交修改请求
            this.editArea(params);
            //关闭Dialog
            this.closeDialog();
        },
        myAreaDelete(index, data) {
            let params = {
                data: data
            };
            this.deleteArea(params);
        },
        setSelectedCity(value) {
            this.selectedCity = this.$refs.areaCascader.getCheckedNodes()[0].pathLabels;
        },
        getPosition(data) {
            this.areaForm.areaName = data.address;
            this.areaForm.areaLng = data.LngLat[0];
            this.areaForm.areaLat = data.LngLat[1];
        },
        toggleCollapse(){
            if(this.isCollapse){
                this.isCollapse = false;
                setTimeout(_ => {
                    this.isShowFont = true;
                },500);
            }else{
                this.isCollapse = true;
                this.isShowFont = false;
            }
        },
        getAccountNameByID(userID){
            return this.accountData.data.find(item => item.userId === userID).userName;
        },
        getAreaNameByID(areaID){
            return this.areaData.find(item => item.areaId === areaID).areaName;
        },
        getBehavior(behavior){
            switch (behavior){
                case 1: return '添加';
                case 2: return '编辑';
                case 3: return '删除';
                default: return '';
            }
        },
        getBehaviorClass(behavior){
            switch (behavior){
                case 1: return 'note-highlight-green';
                case 2: return 'note-highlight-yellow';
                case 3: return 'note-highlight-red';
                default: return '';
            }
        }
    },
    computed: {
        ...mapState({
            areaData: state => state.active.areaData,
            areaRecords: state => state.active.recordData.area,
            accountData: state => state.active.accountData,
            citys: state => state.static.citys,
            loginInfo: state => state.static.loginInfo
        }),
        MapSelectItem() {
            return this.areaData.find(item => item.areaId === this.areaForm.areaId);
        }
    },
    created() {
        //绑定事件来适应窗口大小的变化,做到自适应高度
        window.addEventListener("resize", this.getTableHeight, false);
        this.getTableHeight();

        //初始化区域数据
        this.initAreas();
        //初始化Account数据
        this.initAccounts();
    },
    mounted() {

    }
}
</script>

<style scoped>
.el-row{
    margin-bottom: 20px;
}

.el-row:last-child{
    margin-bottom: 0;
}

::v-deep .row-background-default{
    background-color: #ffffff;
}
::v-deep .row-background-default:hover{
    transition: background-color .15s;
    background-color: #f5f7fa;
}

::v-deep .row-background-grey{
    background-color: #f9f9f9;
}

::v-deep .row-background-blue{
    background-color: #f5faff;
}

::v-deep .header-cell{
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    background-color: #ffffff00 !important;
}

::v-deep .has-gutter tr{
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

::v-deep .el-table__cell{
    background-color: #ffffff00 !important;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    background-color: #eaeaea;
    border-radius: 8px;
}

.table-cell-button{
    padding: 7px;
    margin-right: 10px;
}
.table-cell-button-alert{
    background-color: #ff8029;
    border-color: #ff8029;
}
.table-cell-button-alert:hover{
    background-color: #ff8029cc;
    border-color: #ff8029cc;
}

.collapse-box{
    position: fixed;
    right: 28px;
    top: 217px;
    border: 0;
    z-index: 5;
    transition: all 0.6s;
}

.toggle-button{
    width: 30px;
    height: 150px;
    writing-mode: horizontal-tb;
    border: 0;
    background-color: #66b1ff;
    color: #ffffff;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    font-size: 15px;
    float: left;
    cursor: pointer;
    transition: all 0.4s;
}

.toggle-button:hover{
    background-color: #409eff;
}

.collapse-box-hide{
    width: 0px;
    height: 150px;
    float: left;
    background-image: linear-gradient(to right bottom, rgba(236, 245, 255, 1), rgba(235, 237, 238, 0.7));
    cursor: default;
    transition: all 0.6s;
}

.collapse-box-active{
    width: 350px;
    height: 470px;
    border-bottom-left-radius: 10px;
}

.note-li{
    font-size: 13px;
    margin-top: 10px;
}

.note-highlight-blue{
    color: #40a9ff;
}

.note-highlight-green{
    color: #67c23a;
}

.note-highlight-yellow{
    color: #e6a23c;
}

.note-highlight-red{
    color: #e05e5e;
}

::v-deep .has-gutter .gutter{
    background-color: #ffffff !important;
    border: 0 !important;
}
</style>